<template>
  <div class="organization-management">
    <div class="content">
      <el-tree 
        ref="tree" 
        :data="data" 
        :props="defaultProps" 
        node-key="orgId" 
        default-expand-all 
        highlight-current 
        class="custom-tree" 
        :render-content="renderContent">
      </el-tree>
      <div class="info-display">
        <h3 class="info-title">节点详细信息</h3>
        <div class="info-row">
          <span class="info-label">组织编号:</span>
          <span v-if="currentNode">{{ currentNode.orgSn }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">组织名称:</span>
          <span v-if="currentNode">{{ currentNode.orgName }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">父级编号:</span>
          <span v-if="currentNode">{{ currentNode.parentSn }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">组织路径:</span>
          <span v-if="currentNode">{{ currentNode.namePath }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">创建时间:</span>
          <span v-if="currentNode">{{ formatDate(currentNode.createTime) }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">更新时间:</span>
          <span v-if="currentNode">{{ formatDate(currentNode.updateTime) }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">排 序 号 :</span>
          <span v-if="currentNode">{{ currentNode.sortNum }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">组织状态:</span>
          <span v-if="currentNode">{{ currentNode.status === 1 ? '启用' : '禁用' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "orgName",
      },
      currentNode: null,
    };
  },
  async created() {
    try {
      const response = await this.$API.org.getAllOrgs();
      this.data = response.data;
      this.setLevels(this.data);
      if (this.data.length > 0) {
        this.currentNode = this.data[0];
      }
    } catch (error) {
      this.$message.error("获取组织数据失败: " + error.message);
    }
  },
  methods: {
    setLevels(data, level = 0) {
      data.forEach(item => {
        item.level = level;
        if (item.children) {
          this.setLevels(item.children, level + 1);
        }
      });
    },
    handleNodeClick(data) {
      this.currentNode = data;
    },
    renderContent(h, { node, data }) {
      return h(
        "span",
        {
          on: {
            click: (event) => {
              event.stopPropagation();
              this.handleNodeClick(data);
            },
          },
        },
        [
          h("i", {
            class: [this.getIcon(data.level), "tree-icon"],
            style: { color: "#FF5733" }, 
          }),
          h(
            "span",
            { class: "tree-label", style: { color: "#000", padding: "10px" } },
            data.orgName
          ),
        ]
      );
    },
    getIcon(level) {
      let iconClass;
      switch (level) {
        case 0:
          iconClass = "el-icon-office-building";
          break;
        case 1:
          iconClass = "el-icon-s-platform";
          break;
        case 2:
          iconClass = "el-icon-s-grid";
          break;
        default:
          iconClass = "el-icon-circle-info";
      }
      return iconClass;
    },
    formatDate(dateString) {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
      const date = new Date(dateString);
      return date.toLocaleString(undefined, options);
    },
  },
};
</script>

<style>
.organization-management {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-family: "Roboto", sans-serif;
}

.content {
  display: flex;
}

.custom-tree {
  padding: 20px;
  width: 30%;
  max-height: 800px;
  overflow-y: auto;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  margin-right: 20px;
}
.custom-tree .el-tree-node {
  transition: background-color 0.2s; 
  font-size: 16px; 
  line-height: 1.5; 
  color: #333; 
}


.custom-tree .el-tree-node .el-tree-node__content {
  height: 30px ; 
  display: flex; 
  align-items: center; 
}
.info-display {
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  width: 60%;
}

.info-title {
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px; 
  margin-bottom: 20px; 
}

.info-row {
  display: grid;
  grid-template-columns: 10% 1fr; 
  margin-bottom: 30px;
}

.info-label {
  font-weight: bold;
}

.tree-icon {
  font-size: 20px;
  vertical-align: middle;
}
</style>